{include file="header" /}
<body>
    <el-container id="app" >
        <el-header class="common-header">
            <div class="common-header-left">
                <div class="common-header-logo">
                    <img alt="logo" src="__PUBLIC__resource/admin/images/logo.png">
                    <label>tmAdmin</label>
                </div>
            </div>
            <div class="common-header-right">
                <a href="https://www.tmadmin.cn/">官网地址</a>
            </div>
        </el-header>
        <el-main>
            <div class="common-container">
                <div class="common-main el-card">
                    <div class="install-container">
                        <el-steps :active="stepActive" align-center>
                            <el-step title="使用协议" ></el-step>
                            <el-step title="环境监测" ></el-step>
                            <el-step title="参数配置" ></el-step>
                            <el-step title="安装完成" ></el-step>
                        </el-steps>
                        <div class="content">
                            <div class="step1" v-if="stepActive == 0">
                                <p>版权完全遵循Apache-2.0开源协议，以下为基于
                                    tmAdmin后台管理系统 的补充协议。</p>

                                <p>为了保证您和他人的利益请遵循以下几条使用规则：</p>

                                <p>1、您可以在完全遵循本协议的情况下，将 tmAdmin后台管理系统 用于商业用途，而不必支付使用费用，但我们也不承诺会对非赞助用户提供任何形式的技术支持；</p>

                                <p>2、使用 tmAdmin后台管理系统 您可以不用在明显页面保留程序版权信息，但程序最终版权仍归原作者所有，为了程序能持续发展建议您在网站底部注明：
                                    tmAdmin后台管理系统，另外我们可能不会对未保留版权信息的用户提供任何无偿的技术支持；</p>

                                <p>3、非授权用户后台版权与程序内版权信息不可以去除，这是我们唯一可以保护自己权益的地方；</p>

                                <p>4、您可以免费使用 tmAdmin后台管理系统 ，修改源代码或界面风格以适应您的实际要求，但是禁止对软件进行改名发布，禁止以任何形式对 tmAdmin后台管理系统 形成竞争；</p>

                                <p>5、您可以对 tmAdmin后台管理系统 进行二次开发，但禁止重新分发任何在 tmAdmin后台管理系统 的整体或任何部分基础上发展的派生版本、修改版本或第三方版本，可以自己分配使用版权请参考第四条；</p>

                                <p>6、如果您在您的程序如引用tmAdmin后台管理系统的功能或者设计，请在明显的地方如官网等地方加入本设计或功能采用 tmAdmin后台管理系统 ；</p>

                                <p>7、自您开始使用 tmAdmin后台管理系统 时本协议已自动生效；</p>

                                <p>8、如果您未能遵守本协议的条款3、条款4、条款5、条款6，您的免费使用授权将被终止，并将依法承担相应法律责任。</p>

                            </div>
                            <div class="step2" v-if="stepActive == 1">
                                <div class="title">
                                    PHP环境要求
                                    <div class="desc">必须满足下列所有条件，否则系统或系统部分功能将无法使用</div>
                                </div>
                                <el-table :data="stepData.step2.tableEnvData">
                                    <el-table-column prop="name" label="选项"></el-table-column>
                                    <el-table-column prop="require" label="要求"></el-table-column>
                                    <el-table-column prop="result" label="检测结果" key="slot">
                                        <template #default="scope">
                                            <el-icon class="icon-success" v-if="scope.row.result == 'success'">
                                                <Check></Check>
                                            </el-icon>
                                            <el-icon class="icon-error" v-else>
                                                <Close></Close>
                                            </el-icon>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="suggest" label="实际状态"></el-table-column>
                                </el-table>
                                <div class="title">
                                    服务端目录权限监测
                                    <div class="desc">必须满足下列所有的目录权限全部可读写的需求才能使用</div>
                                </div>
                                <el-table :data="stepData.step2.tableDirData">
                                    <el-table-column prop="name" label="目录"></el-table-column>
                                    <el-table-column prop="require" label="要求"></el-table-column>
                                    <el-table-column prop="result" label="检测结果" key="slot">
                                        <template #default="scope">
                                            <el-icon class="icon-success" v-if="scope.row.result == 'success'">
                                                <Check></Check>
                                            </el-icon>
                                            <el-icon class="icon-error" v-else>
                                                <Close></Close>
                                            </el-icon>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="suggest" label="说明建议"></el-table-column>
                                </el-table>
                                <div class="title">
                                    前端目录权限监测
                                    <div class="desc">必须满足下列所有的目录权限全部可读写的需求才能使用</div>
                                </div>
                                <el-table :data="stepData.step2.tableWebDirData">
                                    <el-table-column prop="name" label="目录"></el-table-column>
                                    <el-table-column prop="require" label="要求"></el-table-column>
                                    <el-table-column prop="result" label="检测结果" key="slot">
                                        <template #default="scope">
                                            <el-icon class="icon-success" v-if="scope.row.result == 'success'">
                                                <Check></Check>
                                            </el-icon>
                                            <el-icon class="icon-error" v-else>
                                                <Close></Close>
                                            </el-icon>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="suggest" label="说明建议"></el-table-column>
                                </el-table>
                            </div>
                            <div class="step3" v-if="stepActive == 2">
                                <el-form ref="formRef" :model="stepData.step3.formData" :rules="formRules" label-width="120px" >
                                    <div class="title">
                                        数据库选项
                                    </div>
                                    <el-form-item label="数据库地址" prop="db.hostname">
                                        <el-input v-model="stepData.step3.formData.db.hostname" clearable placeholder="请输入数据库地址"></el-input>
                                    </el-form-item>
                                    <el-form-item label="数据库端口" prop="db.hostport">
                                        <el-input v-model="stepData.step3.formData.db.hostport" clearable placeholder="请输入数据库端口"></el-input>
                                    </el-form-item>
                                    <el-form-item label="数据库名称" prop="db.database">
                                        <el-input v-model="stepData.step3.formData.db.database" clearable placeholder="请输入数据库名称"></el-input>
                                    </el-form-item>
                                    <el-form-item label="数据库用户名" prop="db.username">
                                        <el-input v-model="stepData.step3.formData.db.username" clearable placeholder="请输入数据库用户名"></el-input>
                                    </el-form-item>
                                    <el-form-item label="数据库密码" prop="db.password">
                                        <el-input v-model="stepData.step3.formData.db.password" show-password clearable placeholder="请输入数据库密码"></el-input>
                                    </el-form-item>
                                    <el-form-item label="数据表前缀" prop="db.prefix">
                                        <el-input v-model="stepData.step3.formData.db.prefix" clearable placeholder="请输入数据表前缀"></el-input>
                                    </el-form-item>
                                    <div class="title">
                                        管理员选项
                                    </div>
                                    <el-form-item label="用户名" prop="username">
                                        <el-input v-model="stepData.step3.formData.username" clearable placeholder="请输入用户名"></el-input>
                                    </el-form-item>
                                    <el-form-item label="密码" prop="password">
                                        <el-input v-model="stepData.step3.formData.password" show-password clearable placeholder="请输入密码"></el-input>
                                    </el-form-item>
                                    <el-form-item label="确认密码" prop="password2">
                                        <el-input v-model="stepData.step3.formData.password2" show-password clearable placeholder="请输入确认密码"></el-input>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <div class="step3" v-if="stepActive ==3">
                                <el-result
                                        icon="success"
                                        title="安装完成"
                                        :sub-title="stepData.step4.msg"
                                >
                                    <template #extra>
                                        <el-button type="primary" @click="jumpUrl" >后台登录跳转</el-button>
                                    </template>
                                </el-result>
                            </div>
                        </div>
                        <div class="footer">
                            <div class="step1" v-if="stepActive == 0">
                                <el-checkbox v-model="stepData.step1.isAgreement">
                                    <span class="text-tx-secondary text-sm">
                                        已阅读并同意此协议
                                    </span>
                                </el-checkbox>
                                <el-button type="primary" @click="handleNext()">下一步</el-button>
                            </div>
                            <div class="step2" v-if="stepActive == 1">
                                <el-button type="primary" @click="handlePrev()">上一步</el-button>
                                <el-button type="primary" @click="handleNext()">下一步</el-button>
                            </div>
                            <div class="step3" v-if="stepActive == 2">
                                <el-button type="primary" @click="handlePrev()">上一步</el-button>
                                <el-button type="primary" :loading="stepData.step3.lock" @click="handleSubmit()">提交</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-main>
    </el-container>
</body>
<script>
    const { createApp, ref, reactive, getCurrentInstance } = Vue;
    const { ElMessage, ElNotification } = ElementPlus

    const App = {
        setup() {
            const stepActive = ref(0);

            //数据
            const stepData = reactive({
                step1: {
                    isAgreement: false
                },
                step2: {
                    tableEnvData:[],
                    tableDirData:[],
                    tableWebDirData:[],
                    is_submit: false
                },
                step3: {
                    refForm: null,
                    formData: {
                        db: {
                            hostname: '',
                            hostport: '',
                            database: '',
                            username: '',
                            password: '',
                            prefix: 'tm_'
                        },
                        username: '',
                        password: '',
                        password2: '',
                    },
                    is_complete: false,
                    lock: false,
                    info: []
                },
                step4:{
                    msg: '',
                    url: ''
                }
            });
            // 表单
            const formRef = ref(null);
            // 规则
            const formRules = {
                'db.hostname': [
                    { required: true, message: '请输入数据库地址', trigger: 'blur' }
                ],
                'db.hostport': [
                    { required: true, message: '请输入数据库端口', trigger: 'blur' }
                ],
                'db.database': [
                    { required: true, message: '请输入数据库名称', trigger: 'blur' }
                ],
                'db.username': [
                    { required: true, message: '请输入数据库用户名', trigger: 'blur' }
                ],
                'db.password': [
                    { required: true, message: '请输入数据库密码', trigger: 'blur' }
                ],
                'db.prefix': [
                    { required: true, message: '请输入数据表前缀', trigger: 'blur' }
                ],
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
                password2: [
                    { required: true, message: '请输入确认密码', trigger: 'blur' },
                    {
                        validator(rule, value, callback) {
                            if (value === '') {
                                callback(new Error('请再次输入确认密码'))
                            } else if (value !== stepData.step3.formData.password) {
                                callback(new Error('两次输入的密码不一致'))
                            } else {
                                callback()
                            }
                        },
                        trigger: ['change', 'blur']
                    }
                ],
            };
            // 定时器
            let timer = "";
            // 获取系统环境
            const getEnvData = async () => {
                let res = await request.get('{$url_path}/install/index/envCheck');
                if (res.code == 0) {
                    stepData.step2.tableEnvData = res.data.check_env;
                    stepData.step2.tableDirData = res.data.check_dir_file;
                    stepData.step2.tableWebDirData = res.data.check_web_dir_file;
                    stepData.step2.is_submit = res.data.is_submit;
                } else {
                    ElMessage({
                        message: '获取环境检测数据失败',
                        type: 'error',
                    });
                }
            };

            // 上一步
            const handlePrev = () => {
                stepActive.value --;
            };
            // 提交
            const handleSubmit = async() => {
                await formRef.value.validate(async (valid) =>{
                    if (!valid) return;
                    stepData.step3.lock = true;
                    polling();
                    let res = await request.post('{$url_path}/install/index/submit', stepData.step3.formData);
                    stepData.step3.lock = false;
                    if (res.code == 0) {
                        stepData.step4.url = res.data.url;
                        stepData.step4.msg = res.data.msg;
                        stepData.step3.is_complete  = true;
                    } else {
                        clearInterval(timer);
                        ElMessage({
                            message: res.msg,
                            type: 'error',
                        });
                    }
                });
            };
            //  安装信息轮训
            const polling = () => {
                timer = setInterval(async() => {
                    let res = await request.get('{$url_path}/install/index/installInfo');
                    if (res.code == 0) {
                        if(stepData.step3.is_complete && res.data.length < 1) {
                            clearInterval(timer);
                            stepActive.value ++;
                            return true;
                        }
                        // 获取新的安装信息数组
                        let newLList = res.data.filter(item =>stepData.step3.info.indexOf(item) === -1);
                        newLList.forEach((val, index) => {
                            setTimeout(() => {
                                ElNotification({
                                    title: val,
                                    type: 'success',
                                })
                            }, index>0?index*500:0);
                        });
                        stepData.step3.info = res.data;
                    } else {
                        clearInterval(timer);
                        ElMessage({
                            message: res.msg,
                            type: 'error',
                        });
                    }
                }, 1000);
            };
            // 下一步
            const handleNext = () => {
                if(stepActive.value === 0) {
                    if(!stepData.step1.isAgreement) {
                        ElMessage({
                            message: '确认已阅读并同意协议',
                            type: 'error',
                        });
                        return false;
                    }

                    getEnvData()
                    stepActive.value ++;
                } else if (stepActive.value === 1) {
                    if(!stepData.step2.is_submit) {
                        ElMessage({
                            message: '环境检测未通过',
                            type: 'error',
                        });
                        return false;
                    }
                    stepActive.value ++;
                } else if (stepActive.value === 2) {
                    stepActive.value ++;
                }
            };
            // 跳转
            const jumpUrl = () => {
                location.href = stepData.step4.url;
            }

            return {
                stepActive,
                stepData,
                handleNext,
                handlePrev,
                jumpUrl,
                formRef,
                formRules,
                handleSubmit,
            };
        },
        components:{
            'Check': ElementPlusIconsVue.Check,
            'close': ElementPlusIconsVue.Close
        }
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#app");
</script>
</html>